<template>
	<div class="mainPage">
		<el-container style="height: 100%; border: 1px solid #eee">
			<el-container>	
				<el-header >
					<div class="navLi">
						<router-link to="/homePage" class="mainPageNav">首页</router-link>
						<router-link to="/customer" class="mainPageNav">客户</router-link>
						<router-link to="/homePage" class="mainPageNav">营销</router-link>
						<router-link to="/homePage" class="mainPageNav">分析</router-link>
					</div>
					
		
					<div style="text-align: right; margin-top: -60px;">
						<el-dropdown>
							<i class="el-icon-question" style="margin-right: 20px" @click="handle"></i>
						</el-dropdown>
						
						<el-dropdown>
							<i class="el-icon-setting" style="margin-right: 15px"></i>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>个人中心</el-dropdown-item>
						
								<el-dropdown-item ><span @click="quit">退出</span></el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<span>{{nickname}}</span>
					</div>
					
				</el-header>

				<el-main>					
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'mainPage',
		data() {
			return{
				nickname:'will'
			}
		},
		methods:{
			quit:function(){
				this.$router.push('/login')
			},
			handle:function(){
				let routeUrl = this.$router.resolve({
					path: "/help" 
				});
				window.open(routeUrl.href, '_blank');
			}
		}
	};
</script>

<style>
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}
	.navLi{
		margin-right: 100px;
	}
	.mainPageNav{
		color: black;
		text-decoration: none;
		margin: 10px;
	}
	
	.mainPageNav:hover{
		color: blue;
	}
	
</style>
